﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="H5Video.aspx.cs" Inherits="HTML5Video.Video.H5Video" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Resource/jquery-1.8.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div_contain" style="border: 1px solid red; width: 640px; height: 264px;">
            <div style="position: relative">
                <video id="video1">
                    
                </video>
                <%--<img src="http://video-js.zencoder.com/oceans-clip.png" id="video_image" style="top: 0; left: 0; position: absolute; " />--%>
                <%--<img src="" id="img_playButton" style="top: 50%; left: 50%; position: absolute; margin-left: -30px; margin-top: -30px;" />--%>
            </div>
            <div style="width: 640px; height: 22px; position: relative; background-color: transparent; top: -26px">
                <input type="button" value="Prev" />
                <input type="button" value="Play" id="video_play" />
                <input type="button" value="Next" />
                <input type="button" value="Share" />
                <input type="button" value="Streaming" />
                <input type="button" value="Volume" />
            </div>
        </div>
        <br /><br />
        <div>
            <div id="div_timeinfo" style="width:500px;height:1px;border:1px solid red;background-color:red;float:left"></div>
            <div>duration:<span id="span_duration"></span></div>
        </div>
        <br /><br /><br /><br />
        <div id="d1">
            <input type="button" id="btn1" value="getbit" />
            <input type="text" id="txt1" />
        </div>

        <div id="d2" style="display:none">
            <asp:TextBox ID="txt111" runat="server"></asp:TextBox>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        $("#d2").css("display", "block");
    })

    /*
        set currentTime  (change the image  setAttribute("poster",image))
        get bitrate  100kbps

        overwirte the control!!!!!

        all events are here!
        http://www.douban.com/note/158621500/
    */

    $(function () {

        var obj = document.getElementById("video1");

        $("#div_contain").mousemove(function (e) {
            $("#span_duration").text("00:" + parseInt(obj.duration));
        })

        $("#div_timeinfo").mousemove(function (e) {
            var x = e.pageX;
            var _x = this.clientLeft;
            var w = parseInt(this.style.width);

            var _ct = (x - _x) / w;

            var r = parseInt(_ct * obj.duration);
            if (r < 10) {
                r = "00:0" + r;
            }
            if (r > 10) {
                r = "00:" + r;
            }
            $("#d2").html(r);
        })

        $("#video_play").click(function () {
            if ($(this).val() == "Play") {
                $(this).val("Pause");
                obj.play();
                return;
            }
            if ($(this).val() == "Pause") {
                $(this).val("Play");
                obj.pause();
                return;
            }
            
        })
    })


    /*
        video -- vid
        url   -- video datasource
        width -- video width
        height-- video height
    */
    var VideoControl = function (vid, url, width, height) {
        //video init begin
        this._videoEl = document.getElementById(vid);
        this._videoInit = function () {
            this._videoEl.setAttribute("autoplay", "autoplay");
            this._videoEl.setAttribute("preload", "auto");
            this._videoEl.setAttribute("width", width);
            this._videoEl.setAttribute("height", height);
            var suffix = url.substring(url.lastIndexOf('.') + 1);
            this._videoEl.appendChild($("<source src='" + url + "' type='video/" + suffix + "' />").get(0));
        }
        //video init end
    }

    var t = new VideoControl("video1", "http://video-js.zencoder.com/oceans-clip.mp4", 640, 264);
    t._videoInit();
</script>
